import { Meta } from '@storybook/addon-docs'

<Meta title="示例" />

# 须知

> 一些须知，主要是`.stories.ts` 的写法和`.stories.mdx`的写法模板示例  
> 使用 storybook 过程中最主要的是去看官方文档（尽管是英文，也请好好阅读），这里只是一些常用的写法示例，以及一些常见的问题的解决方案  
> 遇到问题还是请去官方文档查看，还可以参考一下侧边栏中的官方示例（mdx 写法）

[官方文档-write-doc](https://storybook.js.org/docs/vue/writing-docs/docs-page '官方文档，全英文，还请多啃')

## 使用说明

### 普通的 story 写法（typescript）

```typescript dark
// libs/Iconfont/iconfont.stories.ts
// 这条引入是用于类型声明的
import { Meta, StoryFn } from '@storybook/vue3'
// 这是引入组件，也可以没有
import Iconfont from '@/libs/Iconfont/index.vue'

// 这里是整个页面的描述，大部分的参数其实我也没用过，具体请参照storybook官方文档
export default {
  // 侧边栏的参数-标题，「/」表示分组
  title: '组件/Iconfont',
  // 组件的参数
  component: Iconfont,
  // 参数的描述
  parameters: {
    // 自定义文档
    docs: {
      // 文档描述 -- 这一部分官方文档太少，不需要写太详细
      description: {
        // 组件描述
        component:
          '集成iconfont、ant-design-icon、element-icon、（src/assets/icons目录下的webp图片icon）的统一图标调用组件',
      },
      // 源码的描述
      source: {
        // 语言
        language: 'html',
        // 代码 -- 注意这里的代码很容易造成bug，不推荐使用，建议不写，或者写成null
        // 推荐：code: null
        code: `
<icon-font type="i-home" />

<script lang="ts" setup>
  import Iconfont from '@/libs/Iconfont/index.vue'
</script>
`,
      },
    },
  },
} as Meta<typeof Iconfont> // 注意尾部的类型声明

// 这里是模板，注意类型声明
// 每一个模板都会给侧边栏生成一个选项
export const Default: StoryFn = args => ({
  // 记得注册组件，如果使用到了UI库的组件，也需要注册（也要注意import）
  // 例如：components: { Iconfont, ElButton },
  components: { Iconfont },
  // 之后是普通的vue代码，记得用setup导出args参数
  setup() {
    return { args }
  },
  // 这里是模板的内容，也就是vue的template
  template: `
    <div>
    <Iconfont v-bind="args" :style="{fontSize: args.styleFontSize+'px', color: args.styleColor}"/>
    </div>
  `,
})
// 这里是模板的参数，会在操作台的参数中显示
Default.args = {
  type: 'p-home',
  styleColor: '#f00',
  styleFontSize: 50,
}
// 这里是模板的名字，会在侧边栏显示
Default.storyName = '默认'
```

### mdx 写法

````md dark
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import CodexHeader from '@/layouts/CodexHeader/index.vue'
import useMainStore from '@/store/main'
import { onMounted, onUnmounted } from 'vue'
import { ElButton } from 'element-plus'
import EventBus from '@/libs/EventBus'

// 这里是必要的，参数可以自选

<Meta
  title="布局/顶部导航"
  component={CodexHeader}
  parameters={{
    docs: {
      source: {
        code: null,
      },
    },
  }}
/>

// 这个是模板，写法基本和普通 js、ts 差不多，区别是这里不准有空行，所有代码都需要紧密贴合
export const Template = args => {
return {
components: { CodexHeader, ElButton },
setup() {
const store = useMainStore()
onMounted(() => {
store.login('token', { id: '1', name: '滨江水务', avatar: '' })
})
onUnmounted(() => {
store.logout()
})
function changeTitle() {
EventBus.emit('changeTitle', args.changeTitle)
}
return { args, changeTitle }
},
template: `<codex-header v-bind="args"/> <el-button type="primary" @click="changeTitle">修改标题</el-button>`,
}
}

// 记得导出
export const Default = Template.bind({})
Default.args = {
logo: false,
defaultTitle: 'Codex',
changeTitle: '新的标题',
}
Default.storyName = '默认'

// 下面就是 md 语法，请参照 md 的写法写

# 顶部导航 CodexHeader

## 基础用法

> 由于 storybook 的限制，顶部导航可能会在 canvas 外部出现，请留意顶部导航的位置

// 这里不是 md，是 mdx 的写法了，具体去看 mdx 的文档
<Canvas>
<Story name="默认">{Default}</Story>
</Canvas>

<ArgsTable story="默认" />

## 跨组件修改标题的方法

```typescript dark
// 修改顶部导航的标题：通过事件bus发送消息来修改
import EventBus from '@/libs/EventBus'

EventBus.emit('changeTitle', '某个垃圾包检测的项目名称')
```
````

```

```
